let con = document.querySelector(".container");
let seriesPet = ["cao", "fire", "fly", "water"];
let colors = [
  ["#8cc7ad", "#acc7fd"],
  ["#e27f6e", "#f23f6e"],
  ["#f5f5f5", "#ffeec5"],
  ["#2efde0", "#dfffe0"],
];
let i = 1;
let allPets = [
  [
    "bubu1.png",
    "bubu2.png",
    "bubu3.png",
    "qiu1.png",
    "qiu2.png",
    "qiu3.png",
    "ya1.png",
    "ya2.png",
    "ya3.png",
  ],
  [
    "bei1.png",
    "bei2.png",
    "bei3.png",
    "hou1.png",
    "hou2.png",
    "hou3.png",
    "ji1.png",
    "ji2.png",
    "ji3.png",
  ],
  [
    "f1.png",
    "f2.png",
    "f3.png",
    "mao1.png",
    "mao2.png",
    "mao3.png",
    "pi1.png",
    "pi2.png",
    "pi3.png",
  ],
  [
    "gui1.png",
    "gui2.png",
    "gui3.png",
    "sa1.png",
    "sa2.png",
    "you1.png",
    "you2.png",
    "you3.png",
  ],
];

function createItem() {
  let newItem = document.createElement("div");
  let newAvatar = document.createElement("div");
  let newName = document.createElement("div");
  let newType = document.createElement("div");
  let newCode = document.createElement("div");
  let newImg = document.createElement("img");
  newItem.classList.add("item");

  newAvatar.classList.add("avatar");
  newName.classList.add("name");
  newType.classList.add("type");
  newCode.classList.add("code");
  let series = Math.floor(Math.random() * 4);
  let len = allPets[series].length;
  let idx = Math.floor(Math.random() * len);
  let fileName = allPets[series][idx];
  let name = fileName.split(".")[0];
  console.log(name);
  let type = seriesPet[series];
  let imgSrc = `./saierhao/${type}/${fileName}`;
  newName.textContent = name;
  newType.textContent = `Type:${type}`;
  newCode.textContent = "#" + i.toString().padStart(3, "0");
  newImg.src = imgSrc;
  newAvatar.appendChild(newImg);
  newItem.style.background = `linear-gradient(to bottom, ${colors[series][0]}, ${colors[series][1]})`;
  newItem.appendChild(newAvatar);
  newItem.appendChild(newCode);
  newItem.appendChild(newName);
  newItem.appendChild(newType);
  con.appendChild(newItem);
  i++;
}

let interval = setInterval(() => {
  createItem();
  if (i > 150) {
    clearInterval(interval);
  }
}, 500);
